<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- header -->
		<%@ include file="/WEB-INF/views/include/header.jsp"%>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PCTEzZVCWLNzwkThNtrmMwlQrPyKosvT"></script>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		
		<style>
				#gxd .box3 {
				  padding-top: 10px;
				  cursor: pointer;
				  height: 250px;
				  font-size: 18px;
				  text-align: center;
				  border-radius: 10px;
				  color: #fff;
				  background-color: #c9c9c9;
				  box-shadow: 0 4px 0 #b9b8b8;
				}
				#gxd .box3.active {
				  background-color: #56d7ab;
				  box-shadow: 0 4px 0 #5bc7a2;
				}
				#gxd .box3 .title {
				  font-size: 24px;
				}
				#gxd .box3 .box-content {
				  position: relative;
				  width: 50%;
				}
				#gxd .box3 .box-content .box-text {
				  position: absolute;
				  font-size: 16px;
				  width: 100%;
				  top: 38%;
				}
				#gxd .box3 .box-chart {
				  height: 155px;
				}
				body {
					background-color: #fff;
				}
				.shadow-box {
					border-radius: 8px;
					box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
					margin-bottom:18px;
				}
</style>
	</head>
	<body class="no-skin">
	<div class="container">
	<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
	</script>
	<div class="row" id="gxd" style="margin-bottom:20px;">
	    <div class="col-xs-4 box-container">
	        <div class="box3 clearfix active">
	            <p class="title">专业招商小分队</p>
	            <div class="box-content pull-left">
	                <p>大项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="zy-d"></div>
	            </div>
	            <div class="box-content pull-right">
	                <p>好项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="zy-h"></div>
	            </div>
	        </div>
	    </div>
	    <div class="col-xs-4 box-container">
	        <div class="box3 clearfix">
	            <p class="title">乡镇招商小分队</p>
	            <div class="box-content pull-left">
	                <p>大项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="xz-d"></div>
	            </div>
	            <div class="box-content pull-right">
	                <p>好项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="xz-h"></div>
	            </div>
	        </div>
	    </div>
	    <div class="col-xs-4 box-container">
	        <div class="box3 clearfix">
	            <p class="title">有关责任单位</p>
	            <div class="box-content pull-left">
	                <p>大项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="yg-d"></div>
	            </div>
	            <div class="box-content pull-right">
	                <p>好项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="yg-h"></div>
	            </div>
	        </div>
	    </div>
	</div>
	
	<div class="row clearfix">
		<div class="col-md-12 column shadow-box">
			<div id="bigteam" style="width: 100%;height:600px;"></div>
		</div>
	</div>
	<div class="row clearfix">
		<div class="col-md-12 column shadow-box">
			 <div id="goodteam" style="width: 100%;height:600px;"></div>
		</div>
	</div>
	
	<div class="row clearfix">
		<div class="col-md-12 column shadow-box" >
				<div class="row" >
							<div class="page-content">
								<!-- PAGE CONTENT BEGINS -->
									<!-- jqGrid表格 -->
									<table id="gridTable"></table>
									<!-- jqGrid工具类 -->
									<div id="gridPager"></div>
									<!-- 查询对话框 -->
									<div style="display: none;">
										<div class="row" id="queryDialog"></div>
									</div>
								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
				</div><!-- /.row -->
		</div>
	</div>

</div>
		<script src="<s:url value="/assets/dist/js/echarts.min.js"></s:url>"></script>
		<%@ include file="/WEB-INF/views/include/footer.jsp"%>
		<script type="text/javascript">
		//基本路径
		var baseUrl = "<s:url value="/chart/show/team"></s:url>/"
		
		//jqgrid的表格高度
		var height = 320;
		//jqgrid表格行头的中文
		var colNames = ['','小组分类','小组名称','大项目任务数','大项目完成数','大项目完成路','好项目任务数','好项目完成数','好项目完成率','排名'];
		//jqgrid表格中每一行的信息模型
		var colModel = [
			{name:'sysId', width:0, hidden: true,key:true},
			{name:'teamClass',projectname:'teamClass',width:120,editable: true},
			{name:'team',projectname:'team',width:120,editable: true},
			{name:'bigplan',projectname:'bigplan',width:120,editable: true},
			{name:'bigfinish',projectname:'bigfinish',width:120,editable: true},
			{name:'bigratio',projectname:'bigratio',width:120,editable: true},
			{name:'goodplan',projectname:'goodplan',width:120,editable: true},
			{name:'goodfinish',projectname:'goodfinish',width:120,editable: true},
			{name:'goodratio' ,projectname:'goodratio', width:120,editable: true},
			{name:'rank',projectname:'rank',width:120,editable: true}
			
		                      
		];
		
		//jqgrid的具体执行方法
		jqgrid({
			shrinkToFit:false,
          
			gridTableId : "#gridTable",
			gridPagerId : "#gridPager"
		});
		
			   var bigteam = echarts.init(document.getElementById('bigteam'));
			   options = {
					    title : {
					        text: '各小队大项目完成情况',
					        subtext: '数据来源招商办'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['任务数','完成数']
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType: {show: true, type: ['line', 'bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'value',
					            boundaryGap : [0, 0.01]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'category',
					            data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
					        }
					    ],
					    series : [
					        {
					            name:'任务数',
					            type:'bar',
					            data:[18203, 23489, 29034, 104970, 131744, 630230]
					        },
					        {
					            name:'完成数',
					            type:'bar',
					            data:[19325, 23438, 31000, 121594, 134141, 681807]
					        }
					       
					    ]
					};
			   $.ajax({
	                type : "POST",
	                url : "/chart/show/bigteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify({"teamClass": "专业招商小分队"}),
	                success:function(result) {
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
	                        options.yAxis[0].data = result.data.category;
	                       // options.series[0].name = result.data.series[0].name;
	                        options.series[0].data = result.data.series[0].data;
	                        options.series[1].data = result.data.series[1].data;
	                        bigteam.hideLoading();
	                        bigteam.setOption(options); 
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
			   
			   //好项目
			   var goodteam = echarts.init(document.getElementById('goodteam'));
			   options2 = {
					    title : {
					        text: '各小队好项目完成情况',
					        subtext: '数据来源招商办'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['任务数','完成数']
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType: {show: true, type: ['line', 'bar']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'value',
					            boundaryGap : [0, 0.01]
					        }
					    ],
					    yAxis : [
					        {
					            type : 'category',
					            data : ['巴西','印尼','美国','印度','中国','世界人口(万)']
					        }
					    ],
					    series : [
					        {
					            name:'任务数',
					            type:'bar',
					            data:[18203, 23489, 29034, 104970, 131744, 630230]
					        },
					        {
					            name:'完成数',
					            type:'bar',
					            data:[19325, 23438, 31000, 121594, 134141, 681807]
					        }
					       
					    ]
					};
			   $.ajax({
	                type : "POST",
	                url : "/chart/show/goodteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify({"teamClass": "专业招商小分队"}),
	                success:function(result) {
	                	
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
	                        options2.yAxis[0].data = result.data.category;
	                       // options.series[0].name = result.data.series[0].name;
	                        options2.series[ 0].data = result.data.series[0].data;
	                        options2.series[1].data = result.data.series[1].data;
	                        goodteam.hideLoading();
	                        goodteam.setOption(options2); 
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
			   
			//
				function Pie(option) {
			    this.num1 = option.num1;
			    this.num2 = option.num2;
			    this.rate = option.rate;
			    this.el = option.el;
			}
			Pie.prototype.init = function() {
			    var _this = this;
			    var option = {
			        series: [
			            {
			                name:'总完成情况',
			                type:'pie',
			                radius: ['85%', '90%'],
			                avoidLabelOverlap: false,
			                label: {
			                    normal: {
			                        show: false,
			                        position: 'center',
			                    },
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
			                data:[
			                    {
			                        value: _this.num1, 
			                        name: _this.rate+'%',
			                        label: {
			                            normal: {
			                                show: true,
			                                textStyle: {
			                                    color: '#fff',
			                                    fontSize: '30',
			                                }
			                            }
			                        },
			                        itemStyle: {
			                            color: '#fff',
			                            shadowBlur: 10,
			                            shadowColor: '#fff'
			                        }
			
			                    },
			                    {
			                        value: _this.num2,
			                        name:'剩余',
			                        itemStyle: {
			                            color: 'rgba(0,0,0,0)',
			                        }
			                    },
			                ]
			            }
			        ]
			    };
			
			    var _ec = echarts.init(document.getElementById(_this.el));
			    _ec.setOption(option);
			    window.addEventListener('resize', function() {
			        _ec.resize();
			    })
			}
			
				  $.ajax({
	                type : "GET",
	                url : "/chart/show/goodbigrate",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	               // data:JSON.stringify({'':""}),
	                success:function(result) {
	                	
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
							//alert(result.data.category);
	                        //---
								var op4 = {
									num1:result.data.bigfinishzy ,//完成数 
									num2: result.data.bigrestzy,//剩余数
									rate: result.data.bigratezy,//完成率
									el: 'zy-d'
								};
								
								var pie1 = new Pie(op4);
								pie1.init();
								
								var op5 = {
									num1: result.data.goodfinishzy,
									num2: result.data.goodrestzy,
									rate: result.data.goodratezy,
									el: 'zy-h'
								};
								
								var pie2 = new Pie(op5);
								pie2.init();
								
								var op6 = {
									num1: result.data.bigfinishxz,
									num2: result.data.bigrestxz,
									rate: result.data.bigratexz,
									el: 'xz-d'
								};
								
								var pie3 = new Pie(op6);
								pie3.init();
								
								var op7 = {
									num1: result.data.goodfinishxz,
									num2: result.data.goodrestxz,
									rate: result.data.goodratexz,
									el: 'xz-h'
								};
								
								var pie4 = new Pie(op7);
								pie4.init();
								
								var op8 = {
									num1: result.data.bigfinishzr,
									num2: result.data.bigrestzr,
									rate: result.data.bigratezr,
									el: 'yg-d'
								};
								
								var pie5 = new Pie(op8);
								pie5.init();
								
								var op9 = {
									num1: result.data.goodfinishzr,
									num2: result.data.goodrestzr,
									rate: result.data.goodratezr,
									el: 'yg-h'
								};
								
								var pie6 = new Pie(op9);
								pie6.init();
							
							
							///---
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
			
	
			var nowIndex = 0;
			$('#gxd').on('click', '.box3', function() {
			    var clickIndex = $(this).parent('.box-container').index();
			    // 如果点击当前则返回
			    if(nowIndex == clickIndex) {
			        return;
			    }
			    $('#gxd .box3').removeClass('active');
			    $(this).addClass('active');
			    nowIndex = clickIndex;
			    // 根据nowIndex去做不同处理
				var teamclass ='专业招商小分队';
			    if(nowIndex ==0){
			    	teamclass ='专业招商小分队';
			    }
				if(nowIndex ==1){
					teamclass ='乡镇招商小分队';
				}
				if(nowIndex==2) {
					teamclass ='有关责任单位';
				}
				//alert(teamclass);
				var teamcla = {'teamClass' : teamclass};
				console.log(teamcla);
				
				query(teamcla);
				
				
				  $.ajax({
	                type : "POST",
	                url : "/chart/show/goodteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify(teamcla),
	                success:function(result) {
	                	
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
							//alert(result.data.category);
	                        options2.yAxis[0].data = result.data.category;
	                       // options.series[0].name = result.data.series[0].name;
	                        options2.series[ 0].data = result.data.series[0].data;
	                        options2.series[1].data = result.data.series[1].data;
	                        goodteam.hideLoading();
	                        goodteam.setOption(options2); 
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
				
				   $.ajax({
	                type : "POST",
	                url : "/chart/show/bigteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify(teamcla),
	                success:function(result) {
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
	                        options.yAxis[0].data = result.data.category;
	                       // options.series[0].name = result.data.series[0].name;
	                        options.series[0].data = result.data.series[0].data;
	                        options.series[1].data = result.data.series[1].data;
	                        bigteam.hideLoading();
	                        bigteam.setOption(options); 
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
				
				
			    
			    console.log(nowIndex);
			});
			   
			 function query(teamclass) {
				 var postData = appendPostDataJson("#gridTable", teamclass);
				seachJqgirdData("#gridTable",postData);
				
			} 
	       
		   
		   
		</script>
	</body>
</html>